
<div id="roleResources">
    <div class="sidebar-shortcuts" id="sidebar-shortcuts">
        <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
            <button class="btn btn-success">
                <i class="ace-icon fa fa-signal"></i>
            </button>

            <button class="btn btn-info">
                <i class="ace-icon fa fa-pencil"></i>
            </button>

            <button class="btn btn-warning">
                <i class="ace-icon fa fa-users"></i>
            </button>

            <button class="btn btn-danger">
                <i class="ace-icon fa fa-cogs"></i>
            </button>
        </div>

        <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
            <span class="btn btn-success"></span>

            <span class="btn btn-info"></span>

            <span class="btn btn-warning"></span>

            <span class="btn btn-danger"></span>
        </div>
    </div><!-- /.sidebar-shortcuts -->

    <ul class="nav nav-list" id="sidebar-menu">
        <li data-level="1" v-for="re in resource">

            <a
                    href="javascript:void(0);" @click="changeArrow(re.id)" class="dropdown-toggle"
                    :haschild="true"
            >
                <i class="menu-icon fa fa-user"></i>
                <span class="menu-text"
                      style="vertical-align: middle;"
                > {{re.name}}</span>
                <b class="arrow" :class="re.arrow?'fa fa-angle-up':'fa fa-angle-down'"></b>
            </a>
            <b class="arrow"></b>

            <ul class="submenu nav-hide" style="display:none;">
                <li data-level="2" v-for="rec in re.children">

                    <a
                            :href="rec.url"
                            :id="'menu_'+rec.url"
                            haschild="false"
                    >
                        <i class="menu-icon fa fa-file-o"></i>
                        <span class="menu-text"
                        > {{rec.name}} </span>
                    </a>
                    <b class="arrow"></b>

                </li>
            </ul>
        </li>
    </ul><!-- /.nav-list -->
    <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
        <i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
           data-icon2="ace-icon fa fa-angle-double-right"></i>
    </div>
</div>
    <script type="text/javascript" src="static/vue/axios.js"></script>
    <script>
        let vue = new Vue({
            el:'#roleResources',
            data:{
                resourceTree:{},
                resource:[],
                setting:{
                    data:{//设置树的数据的配置
                        simpleData: {//简单数据格式配置  一维结构节点数组 不设置默认是多维结构数组
                            enable:true,  //开启使用简单数据格式
                            // idKey: 'id', //设置节点中的id属性key  默认
                            pIdKey: 'parentId' //设置父节点id属性key   与数据库中的字段需要对应
                        }
                    },
                    view:{//显示设置
                        //当显示某个节点/更新节点的时候，自动会调用字体设置
                        fontCss: this.fontCss1
                    }
                },
                nodes:[]
            },
            methods:{
                initMenu:function (id) {

                    axios({
                        url:`resource/initMenu/${id}`,
                    }).then(rs=>{
                        this.nodes=rs.data.obj;
                        let zTreeObj = $.fn.zTree.init($('#MenuTree'),this.setting,this.nodes);
                        this.resource = zTreeObj.getNodes();
                        for (let i=0;i<this.resource.length;i++) {
                            // this.resources[i].arrow = false;  //false 向下
                            Vue.set(this.resource[i],'arrow',false);
                        }
                        $.fn.zTree.destroy("MenuTree");
                    })
                },
                changeArrow:function (id) {
                    for (let i = 0; i < this.resource.length; i++) {
                        if (this.resource[i].id===id){
                            this.resource[i].arrow=!this.resource[i].arrow;
                            continue
                        }
                        this.resource[i].arrow=false
                    }
                }
            },
            created:function () {
                let user=sessionStorage.getItem("user");
                user=JSON.parse(user);
                this.initMenu(user.id)
            }
        })
    </script>

